<template>
  <div class="home">

    <!-- 2.疫情热点 -->
    <HotInfo :news="news"></HotInfo>
    <!-- 3.疫情-小导航 -->
    <div class="list">
      <div>
        <img src="../../assets/images/a.png">
        <div>风险地区</div>
      </div>
      <div>
        <img src="../../assets/images/b.png">
        <div>核酸检测</div>
      </div>
      <div>
        <img src="../../assets/images/c.png">
        <div>防疫物资</div>
      </div>
      <div>
        <img src="../../assets/images/d.png">
        <div>出行政策</div>
      </div>

    </div>
    <!-- 4.国内数据  -->
    <CovNumber :covData="covData"></CovNumber>
    <!-- 6.全国疫情折线图 -->
    <CovLine></CovLine>
    <!-- 7.城市疫情折线图 -->
    <CovCity></CovCity>

    <!-- 5.全国疫情分布 -->
    <!-- <ChinaMap></ChinaMap> -->
    <MyMap title="国内疫情分布" main="main1" :confirm="confirm" :curConfirm="curConfirm" @changeTabMap="changeTabMap"></MyMap>
    <MyMap title="世界疫情分布" main="main2" :confirm="worldConfirm" :curConfirm="worldCurConfirm" @changeTabMap="changeTabMap2"></MyMap>
  </div>
</template>

<script>
import HotInfo from './CovInfo/HotInfo.vue'
import CovNumber from './CovInfo/CovNumber.vue'
import ChinaMap from './VueMap/ChinaMap.vue'
import MyMap from '@/components/MyMap.vue'
import CovLine from './CovLine/CovLine.vue'
import CovCity from './CovCity/CovCity.vue'

export default {
  name: 'HomeView',
  components: {
    HotInfo,
    CovNumber,
    ChinaMap,
    MyMap,
    CovLine,
    CovCity
  },
  data() {
    return {
      news: [],  //列表形式
      covData: {},  //对象形式
      confirm:[],
      curConfirm:[],
      worldConfirm:[],
      worldCurConfirm:[],
    }
  },
  // 生命周期函数--------这里可以在created,也可以在mounted,要是需要操作dom必须在mounted
  created() {
    // --------疫情信息----------------
    this.getCovInfo();
    // -------获取中国疫情---------------
    this.getChinaInfo();
    // -------获取世界疫情--------------
    this.getWorldInfo();
  },
  methods: {
    changeTabMap(val){
      this.$mycharts.chinaMap('main1',val);
    },
    changeTabMap2(val){
      this.$mycharts.worldMap('main2',val);
    },
    // --------疫情信息----------------
    async getCovInfo() {
      let res = await this.$api.getCovInfo();
      console.log(res.data);
      // console.log(res.data.result.news);
      // 1.疫情热点信息
      this.news = res.data.result.news;
      //2.国内疫情数据统计
      let data = res.data.result.desc;
      console.log(data);
      let { currentConfirmedCount, confirmedCount, suspectedCount, curedCount, deadCount, seriousCount, suspectedIncr, currentConfirmedIncr,
        confirmedIncr, curedIncr, deadIncr, seriousIncr, modifyTime } = data    //结构赋值

      this.covData = {
        currentConfirmedCount, confirmedCount, suspectedCount, curedCount, deadCount, seriousCount, suspectedIncr, currentConfirmedIncr,
        confirmedIncr, curedIncr, deadIncr, seriousIncr, modifyTime
      }

      /*** 
        currentConfirmedCount   现存确诊人数
        confirmedCount          累计确诊人数
        suspectedCount          累计境外输入人数
        curedCount              累计治愈人数
        deadCount               累计死亡人数
        seriousCount            现存无症状人数
        suspectedIncr           新增境外输入人数
        currentConfirmedIncr    相比昨天现存确诊人数
        confirmedIncr           相比昨天累计确诊人数
        curedIncr               相比昨天新增治愈人数
        deadIncr                相比昨天新增死亡人数
        seriousIncr             相比昨天现存无症状人数
        

        modifyTime              时间
       ***/

    },
    // -------国内疫情数据---------------------
    async getChinaInfo() {
      let res = await this.$api.getChina();
      console.log('中国疫情-------', res.data);
      let data = res.data.retdata;
      //现有确诊
      let arr = [];
      data.forEach(ele => {
        let obj = {}
        obj.name = ele.xArea;
        obj.value = ele.curConfirm;
        arr.push(obj)
      });
      //累计确诊
      let arr2 = [];
      data.forEach(ele => {
        let obj = {}
        obj.name = ele.xArea;
        obj.value = ele.confirm;
        arr2.push(obj)
      });
      this.curConfirm = arr;
      this.confirm = arr2;
      //绘制地图------需要接收name和value----------------------------------
      this.$mycharts.chinaMap('main1', arr)

    },

    // ------世界疫情数据--------------------
    async getWorldInfo() {
      let res = await this.$api.getWorld();
      console.log('世界疫情-------', res.data);
      let data = res.data.retdata;
      //现有确诊
      let arr = [];
      data.forEach(ele => {
        let obj = {}
        obj.name = ele.xArea;
        obj.value = ele.curConfirm;
        arr.push(obj)
      });
      //累计确诊
      let arr2 = [];
      data.forEach(ele => {
        let obj = {}
        obj.name = ele.xArea;
        obj.value = ele.confirm;
        arr2.push(obj)
      });
      this.worldCurConfirm = arr;
      this.worldConfirm = arr2;
      //绘制地图------需要接收name和value----------------------------------
      this.$mycharts.worldMap('main2', arr)
    },
  }
}
</script>

<style lang="less" scoped>
.list {
  display: flex;
  padding-bottom: 0.2rem;

  >div {
    flex: 1;
    text-align: center;
    color: #666;

    img {
      width: 0.8rem;
      height: 0.8rem;
    }
  }
}
</style>
